<!--
 * @Author: zhang ke
 * @Date: 2025-06-24 16:02:36
 * @LastEditors: your name
 * @LastEditTime: 2025-07-03 16:28:56
 * @Description: 
 * @FilePath: \vue3-admin\src\views\acl\permission\index.vue
-->
<template>
  <div>
    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" :disabled="scope.row.level == 4 ? true :false"
            @click="editMenu('add',scope.row)">
            {{ scope.row == 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button size="small" :disabled="scope.row.level == 1 ? true :false" @click="editMenu('update',scope.row)">
            编辑
          </el-button>
          <el-popconfirm :title="`确定删除${scope.row.name}`" @confirm="delMenu(scope.row)">
            <template #reference>
              <el-button size="small" type="danger" :disabled="scope.row.level == 1 ? true : false">
                删除
              </el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <!--添加和编辑菜单的弹框 -->
    <el-dialog v-model="dialogVisible" :title="title" width="500">
      <template #default>
        <div>
          <el-form label-width="60px">
            <el-form-item label="名称">
              <el-input v-model="formParamse.name" placeholder="请填写名称" />
            </el-form-item>
            <el-form-item label="权限值">
              <el-input v-model="formParamse.code" placeholder="请填写权限值" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelDialog">取消</el-button>
          <el-button type="primary" @click="confirmDialog">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted, reactive} from 'vue'
import {reqAllPermission,reqAddOrUpdateMenu,reqRemoveMenu} from '@/api/acl/menu/index'
import type {PermissionResponseData,PermissionList,Permission} from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
let tableData = ref<PermissionList>([])
let dialogVisible = ref<boolean>(false)
let title = ref<string>('添加')
let formParamse = reactive<any>({
  name:'',
  code:'',
  level:0,
  pid:0,
})
onMounted(()=>{
  getDataList()
})
const getDataList = async()=>{
  let res:PermissionResponseData = await reqAllPermission()
  if(res.code == 200){
    tableData.value = res.data
  }
}

//点击添加和编辑事件 
const editMenu = (type:string,row:Permission)=>{
  Object.assign(formParamse,{
    name:'',
    code:'',
    level:0,
    pid:0,
  })
  dialogVisible.value = true
  if(type == 'add'){
    title.value = '添加'
  }else{
    Object.assign(formParamse, row)
    title.value = '编辑'
  }
}
//取消
const cancelDialog = ()=>{
  dialogVisible.value = false
}
//确定 
const confirmDialog = async()=>{
  let res:any = await reqAddOrUpdateMenu(formParamse)
  if(res.code == 200){
    ElMessage({
      type:'success',
      message: `${title}成功`
    })
    dialogVisible.value = false
    getDataList()
  }else{
     ElMessage({
      type:'success',
      message:`${title}失败`
    })
  }
  
}
//点击删除按钮的事件
const delMenu = async(row:Permission)=>{
  let res = await reqRemoveMenu(row.id)
  if(res.code == 200){
     ElMessage({
      type:'success',
      message:'删除成功'
    })
    getDataList()
  }else{
     ElMessage({
      type:'error',
      message:'删除失败'
    })
  }

}
</script>

<style scoped>
</style>
